﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HotelImages.aspx.cs" Inherits="simpleHotel.Web.HotelImages" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HappyBooking - Hotel Images</title>
    <link rel="stylesheet" href="style/img_slide.css" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
</head>
<body>
   <div id='wrapper'>
		<div id='body'>
			<div id="bigPic">
                <asp:Literal ID="lLargeImg" runat="server"></asp:Literal>
                <!--
				<img src="ImageData/1/1.jpg" alt="" />
				<img src="ImageData/1/2.jpg" alt="" />
				<img src="ImageData/1/3.jpg" alt="" />
				<img src="ImageData/1/4.jpg" alt="" />
				<img src="ImageData/1/5.jpg" alt="" />
				<img src="ImageData/1/6.jpg" alt="" />
				<img src="ImageData/1/7.jpg" alt="" />
				<img src="ImageData/1/8.jpg" alt="" />
				<img src="ImageData/1/9.jpg" alt="" />
				<img src="ImageData/1/10.jpg" alt="" />
                -->
			</div>
			
			
			<ul id="thumbs">
                 <asp:Literal ID="lThumbImg" runat="server"></asp:Literal>
				<%--<li class='active' rel='1'><img src="ImageData/1/1_thumb.jpg" alt="" /></li>
				<li rel='2'><img src="ImageData/1/3_thumb.jpg" alt="" /></li>
				<li rel='3'><img src="ImageData/1/4_thumb.jpg" alt="" /></li>
				<li rel='4'><img src="ImageData/1/5_thumb.jpg" alt="" /></li>
				<li rel='5'><img src="ImageData/1/6_thumb.jpg" alt="" /></li>
				<li rel='6'><img src="ImageData/1/7_thumb.jpg" alt="" /></li>
				<li rel='7'><img src="ImageData/1/8_thumb.jpg" alt="" /></li>
				<li rel='8'><img src="ImageData/1/9_thumb.jpg" alt="" /></li>
				<li rel='9'><img src="ImageData/1/10_thumb.jpg" alt="" /></li>
				<li rel='10'><img src="ImageData/1/2_thumb.jpg" alt="" /></li>--%>
			</ul>
		
		</div>
		<div class='clearfix'></div>
		<div id='push'></div>
	</div>
	
    
	<script type="text/javascript">
	    var currentImage;
	    var currentIndex = -1;
	    var interval;
	    function showImage(index) {
	        if (index < $('#bigPic img').length) {
	            var indexImage = $('#bigPic img')[index]
	            
	            if (currentImage) {
	                if (currentImage != indexImage) {
	                    $(currentImage).css('z-index', 2);
	                    clearTimeout(myTimer);
	                    $(currentImage).fadeOut(250, function () {
	                        myTimer = setTimeout("showNext()", 3000);
	                        $(this).css({ 'display': 'none', 'z-index': 1 })
	                    });
	                }
	            }
	            $(indexImage).css({ 'display': 'block', 'opacity': 1 });
	            currentImage = indexImage;
	            currentIndex = index;
	            $('#thumbs li').removeClass('active');
	            $($('#thumbs li')[index]).addClass('active');
	        }
	    }

	    function showNext() {
	        var len = $('#bigPic img').length;
	        var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
	        showImage(next);
	    }

	    var myTimer;

	    $(document).ready(function () {
	        myTimer = setTimeout("showNext()", 3000);
	        showNext(); //loads first image
	        $('#thumbs li').bind('click', function (e) {
	            var count = $(this).attr('rel');
	            showImage(parseInt(count) - 1);
	        });
	    });


	</script>
    	
</body>
</html>
